<template>
	<view class="comment_item"  >
		<view class="top">
			<view class="top_left">
				<img class="user_avatar" :src="data.face|getFace" />
				<uni-tag v-if="data.owner" class="tag" type="primary" :inverted="false" text="作者" size="mini" circle />
				<span class="nickname">{{ data.nickname }}</span>
				<span class="nickname">{{ cReplyName }}</span>
			</view>
			<view class="top_right" @tap="likeClick(data)">
				<span :class="[data.is_like ? 'active' : '', 'like_count']">{{cLikeCount}}</span>
				<uni-icons v-show="data.is_like" type="hand-up-filled" size="24" color="#007aff"></uni-icons>
				<uni-icons v-show="!data.is_like" type="hand-up" size="24" color="#999"></uni-icons>
			</view>
		</view>
		<view class="content" @tap="replyClick(data)">
			{{ c_content }}
			<span class="shrink" v-if="isShrink" @tap.stop="expandContentFun(data.contents)">...展开</span>
		</view>
		<view class="bottom">
			<span class="create_time">{{ data.create_time|getTimer }}</span>
			<span v-if="data.owner" class="delete" @tap="deleteClick(data)">删除</span>
			<span class="reply" :style="!data.owner?'margin-left: 15rpx;':''" @tap="replyClick(data)">回复</span>
		</view>
	</view>
</template>

<script setup>
	export default {

		props: {
			// 评论数据
			data: {
				type: Object,
				default: () => {},
			},
			// 父级评论数据
			pData: {
				type: Object,
				default: () => {},
			},


		},
		watch: {
			c_content: {
				handler(newVal) {

					this.c_content = newVal ? this.contents.slice(0, this.contentShowLength + 1) : this.contents;

				},
				immediate: true // 第一次改变就执行
			}


		},
		mounted() {
			// 评论过长处理
			this.contentShowLength = 70; // 默认显示评论字符

			this.contents = this.data.contents;
			if (this.contents.length > this.contentShowLength) {
				this.isShrink = true
			} else {
				this.isShrink = false
			}


		},
		data() {
			return {

				c_content: '',
				isShrink: false
			}
		},
		computed: {
			//滚动到指定位置
			roll_top(id) {
				setTimeout(() => {
					this.$nextTick(function() {
						uni.pageScrollTo({
							duration: 100,
							selector: "#reply"+id //滚动到的元素的id
						})

					})
				}, 500)

			},
			//点赞数
			cLikeCount() {

				return this.data.like_count === 0 ? "" : this.data.like_count > 99 ? `99+` : this.data.like_count;
			},
			// 被回复人名称
			cReplyName() {
				return this.data?.reply_name ? ` ▸ ` + this.data?.reply_name : "";
			}

		},

		methods: {
			// 删除
			deleteClick(item) {
				this.$emit("deleteClick", item);
			},
			// 回复
			replyClick(item) {
				// 自己不能回复自己
				// if (item.owner) return;
				this.$emit("replyClick", item);
			},
			// 展开评论
			expandContentFun() {
				this.isShrink = false;
			},
			// 点赞
			likeClick(item) {
				this.$emit("likeClick", item);
			}

		}
	}
</script>

<style lang="scss" scoped>
	////////////////////////
	.center {
		display: flex;
		align-items: center;
	}

	.ellipsis {
		overflow: hidden; //超出文本隐藏
		white-space: nowrap; //溢出不换行
		text-overflow: ellipsis; //溢出省略号显示
	}

	////////////////////////
	.comment_item {
		font-size: 28rpx;

		.top {
			@extend .center;
			justify-content: space-between;

			.top_left {
				display: flex;
				align-items: center;
				overflow: hidden;

				.user_avatar {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}

				.tag {
					margin-right: 6rpx;
				}

				.nickname {
					@extend .ellipsis;
					max-width: 180rpx;
					color: $uni-text-color-grey;
				}
			}

			.top_right {
				@extend .center;

				.like_count {
					color: $uni-text-color-grey;

					&.active {
						color: $uni-color-primary;
					}
				}
			}
		}

		.content {
			padding: 10rpx;
			margin-left: 70rpx;
			color: $uni-text-color;

			&:active {
				background-color: $uni-bg-color-hover;
			}

			.shrink {
				padding: 20rpx 20rpx 20rpx 0rpx;
				color: $uni-color-primary;
			}
		}

		.bottom {
			padding-left: 80rpx;
			font-size: 24rpx;

			.create_time {
				color: $uni-text-color-grey;
			}

			.delete {
				padding: 20rpx 20rpx 0 20rpx;
				color: $uni-border-color;
			}

			.reply {
				color: $uni-color-primary;
			}
		}
	}
</style>